<template>
  <div>
    <a-form auto-label-width size="mini">
      <a-form-item :label="customTranslate('Execution listener')">
      <a-badge :count="executionListener?.length || 0">
        <a-button @click="openDialog">{{customTranslate('Setting')}}</a-button>
      </a-badge>
      </a-form-item>
    </a-form>

    <a-modal v-model:visible="visible" width="50%">
      <a-button type="primary" @click="onAdd">+</a-button>
      <a-table :data="executionListener">
        <template #columns>
          <a-table-column :title="customTranslate('Event Type')" data-index="event">
            <template #cell="{ record }">
              <a-select v-model="record.event">
                <a-option value="start">{{customTranslate('Start')}}</a-option>
                <a-option value="end">{{customTranslate('End')}}</a-option>
                <a-option value="take">{{customTranslate('Take')}}</a-option>
              </a-select>
            </template>
          </a-table-column>
          <a-table-column :title="customTranslate('Listener Type')" data-index="type">
            <template #cell="{ record }">
              <a-select v-model="record.type">
                <a-option value="class">{{customTranslate('Java Class')}}</a-option>
                <a-option value="expression">{{customTranslate('Expression')}}</a-option>
                <a-option value="delegateExpression">{{customTranslate('Delegate Expression')}}</a-option>
              </a-select>
            </template>
          </a-table-column>
          <a-table-column :title="customTranslate('Value')" data-index="value">
            <template #cell="{ record }">
              <a-input v-model="record.value"></a-input>
            </template>
          </a-table-column>
          <a-table-column :title="customTranslate('Field Injection')" data-index="params">
            <template #cell="{ record}">
              <a-badge :count="record?.params?.length || 0">
                <a-button @click="onParamsEdit(record)">{{customTranslate('Setting')}}</a-button>
              </a-badge>
            </template>
          </a-table-column>
          <a-table-column :title="customTranslate('Operation')">
            <template #cell="{ record ,rowIndex}">
              <a-button @click="doDeleteListener(record, rowIndex)">{{customTranslate('Delete')}}</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <template #footer>
        <a-space>
          <a-button type="primary" @click="onClose">{{customTranslate('Ok')}}</a-button>
        </a-space>
      </template>
    </a-modal>

    <a-modal v-model:visible="paramsVisible" width="50%">
      <a-button type="primary" @click="onAddParam">+ 增加</a-button>
      <a-table :data="params">
        <template #columns>
          <a-table-column :title="customTranslate('Name')" data-index="name">
            <template #cell="{ record }">
              <a-input v-model="record.name"></a-input>
            </template>
          </a-table-column>
          <a-table-column :title="customTranslate('Type')" data-index="type">
            <template #cell="{ record }">
              <a-select v-model="record.type">
                <a-option value="stringValue">{{customTranslate('String')}}</a-option>
                <a-option value="expression">{{customTranslate('Expression')}}</a-option>
              </a-select>
            </template>
          </a-table-column>
          <a-table-column :title="customTranslate('Value')" data-index="value">
            <template #cell="{ record }">
              <a-input v-model="record.value"></a-input>
            </template>
          </a-table-column>
          <a-table-column :title="customTranslate('Operation')">
            <template #cell="{ rowIndex}">
              <a-button @click="onDeleteParam(rowIndex)">{{customTranslate('Delete')}}</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <template #footer>
        <a-space>
          <a-button type="primary" @click="onSaveParam">{{customTranslate('Ok')}}</a-button>
        </a-space>
      </template>
    </a-modal>
  </div>
</template>

<script>
import { inject, toRaw } from 'vue';
import customTranslate from "../../translate/customTranslate";

export default {
  props: ["element"],
  data() {
    return {
      visible: false,
      paramsVisible: false,
      executionListener: [],
      params: [],
      currentRow: {}
    };
  },
  setup() {
    const bpmnModeler = inject("bpmnModeler");
    return {
      bpmnModeler,
      customTranslate
    };
  },
  mounted() {
    
    const _element = toRaw(this.element)
    console.log(_element)
    
    this.executionListener = _element?.businessObject?.extensionElements?.values.filter(ex => {
      return ex.$type === 'flowable:ExecutionListener'
    }).map(it => {
      let type = '';
      if ('class' in it) type = 'class'
      if ('expression' in it) type = 'expression'
      if ('delegateExpression' in it) type = 'delegateExpression'
      return {
        event: it.event,
        type,
        value: it[type],
        params: it.fields?.map(f => {
          let fieldType = ''
          if ('stringValue' in f) fieldType = 'stringValue'
          if ('expression' in f) fieldType = 'expression'
          return {
            name: f.name,
            type: fieldType,
            value: f[fieldType]
          }
        }) || []
      }
    }) || [];
  },
  watch: {
  },
  methods: {
    openDialog() {
      this.visible = true;
    },
    onClose() {
      if (this.executionListener?.length) {
        let extensionElements = this.element.businessObject.get('extensionElements')
        if (!extensionElements) {
          extensionElements = this.bpmnModeler.get('moddle').create('bpmn:ExtensionElements')
        }
        extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') || []
        this.executionListener.forEach(item => {
          const executionListener = this.bpmnModeler.get('moddle').create('flowable:ExecutionListener')
          executionListener['event'] = item.event
          executionListener[item.type] = item.value
          if (item.params && item.params.length) {
            item.params.forEach(field => {
              const fieldElement = this.bpmnModeler.get('moddle').create('flowable:Field')
              fieldElement['name'] = field.name
              fieldElement[field.type] = field.value
              executionListener.get('fields').push(fieldElement)
            })
          }
          extensionElements.get('values').push(executionListener)
        })
        this.updateProperties({extensionElements: extensionElements})
      } else {
        const extensionElements = this.element.businessObject[`extensionElements`]
        if (extensionElements) {
          extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') || []
        }
      }

      this.visible = false
    },
    updateProperties(data) {
      const modeling = toRaw(this.bpmnModeler.get("modeling"));
      modeling.updateProperties(toRaw(this.element), data);
    },
    onAdd() {
      this.executionListener.push({
        event: 'start',
        value: '',
        type: 'class'
      })
    },
    doDeleteListener(row, index) {
      console.log(index);
      console.log(toRaw(row));
      this.executionListener.splice(index, 1)
    },
    onParamsEdit(row) {
      console.log(row)
      this.currentRow = row;
      this.params = row.params || [];
      this.paramsVisible = true;
    },
    onAddParam() {
      this.params.push({
        name: '',
        type: 'stringValue',
        value: ''
      })
    },
    onDeleteParam(index) {
      this.params.splice(index, 1)
    },
    onSaveParam() {
      this.currentRow.params = this.params;
      this.paramsVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>

</style>